<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    dialog-width="600px"
    :page-show="pageShow"
    @dialog-close="dialogClose"
  >
    <template #toolPanel />
    <template #searchPanel>
      <search-panel :show-add-button="true" :show-search-button="true"  @search="search" @insert="handleDataInsert" :left="true">
          <el-form-item label="属性:">
            <el-input v-model="filters.attr" style="width: 200px" clearable placeholder="属性" />
          </el-form-item>
          <el-form-item label="属性值:">
            <el-input v-model="filters.attrValue" style="width: 200px" clearable placeholder="属性值" />
          </el-form-item>

          <el-form-item label="备注:">
            <el-input v-model="filters.describes" placeholder="备注"  maxlength="100" clearable />
          </el-form-item>
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :current="start"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="150"
      >
        <template #action="{row}">
          <el-button size="small" round @click="onSubmit(row)">保存</el-button>
          <el-button size="small" round style="color:red;" @click="deletedRow(row)">删除</el-button>
        </template>
      </data-table>
    </template>

    <template #dialog>
      <el-form ref="form" :model="form" label-width="100px" style="display: inline-block"  :hide-required-asterisk="true" :show-message="false">
        <el-form-item required label="属性" prop="attr">
          <el-input v-model="form.attr" auto-complete="off"  placeholder="属性"></el-input>
        </el-form-item>
        <el-form-item label="属性值:" prop="attrValue" style="display: inline-block">
          <el-input maxlength="2000"  v-model="form.attrValue" placeholder="属性值" style="width: 450px;"></el-input>
        </el-form-item>
        <el-form-item label="属性描述:"  prop="describes">
          <el-input  maxlength="200"  v-model="form.describes"  placeholder="属性描述"></el-input>
        </el-form-item>
      </el-form>
      <el-row style="text-align: center;">
        <el-button size="small" round @click="dialogVisible = false" round>取 消</el-button>
        <el-button size="small" round type="primary" @click="onSubmit">保存</el-button>
      </el-row>
    </template>

  </base-layout>
</template>

<script>
  import baseMixin from '@/mixins/base'
  import DialogDataForm from './components/DialogDataForm'
  import { findPageConfig,saveConfig,updateConfig,deleteConfig} from '@/api/utilsapi'

  export default {
    name: 'SystemManager',
    components: { DialogDataForm },
    mixins: [
      baseMixin({
        idName: 'id',
        findData:findPageConfig,
        refresh: '',
        format(res) {
          return res.map(data => {
            return data
          })
        }
      })
    ],
    data() {
      return {
        buttons: [],
        pageShow: true,
        dialogData:{},
        tableColumnAttributes: [
          { name: '属性', value: 'attr',type:'inputStrTable' },
          { name: '属性值', value: 'attrValue',type:'inputStrTable' },
          { name: '备注', value: 'describes',type:'inputStrTable' }
        ],
        filters: {
          attr:'',
          attrValue:'',
          describes:'',
        },
        form: {
          attr:'',
          attrValue:'',
          describes:"",
        }
      }
    },
    methods: {
      async search(form){
        let para = {
          attr: this.filters.attr,
          start: 0,
          pageSize: 10,
          attrValue: this.filters.attrValue ,
          describes: this.filters.describes ,
        };
        this.searchOptions = para;
        this.setTableData()
      },
      async onSubmit(row){
        this.$confirm('确认提交吗？', '提示', {roundButton:true}).then( async () => {
          if(row && row.configId){
            let para = Object.assign({}, row);
            const result = await updateConfig(para);
            this.resultApply(result);
          }else{
            let para = Object.assign({}, this.form);
            const result = await saveConfig(para);
            this.resultApply(result);
          }
        });
      },
      deletedRow(row){
        this.$confirm('确认提交删除吗？', '提示', {roundButton:true}).then( async () => {
          if(row && row.configId){
            let para = Object.assign({}, row);
            const result = await deleteConfig(para);
            this.resultApply(result);
          }
        });
      }
    }
  }
</script>
